import * as React from "react";
import { StyleSheet, View, Dimensions, ViewStyle } from "react-native";
import { Image, Button } from "react-native-elements";
import { observer, inject } from "mobx-react";
import Icon from "react-native-vector-icons/FontAwesome";
import HomeStore from "../Model/HomeStore";
interface Props extends React.Props<any> {
  homeStore: HomeStore;
  style: ViewStyle;
  refitContentOffset: () => void;
}

const { width } = Dimensions.get("window");

@inject("homeStore")
@observer
export default class ImageView extends React.Component<Props> {
  render() {
    let tmpImages: any = []; // tempory array
    this.props.homeStore.images.forEach((imgPath: string, index: number) => {
      tmpImages.push(
        <View key={index} style={styles.contentStyle}>
          <Image source={{ uri: imgPath }} style={styles.imageStyle} />
          <Button
            icon={<Icon name="close" size={16} color="white" />}
            buttonStyle={styles.buttonStyle}
            onPressIn={() => this._deleteImageItem(index)}
          />
        </View>
      );
    });
    return <View style={styles.container}>{tmpImages}</View>;
  }

  _deleteImageItem = (index: number) => {
    // 更改数据源
    this.props.homeStore.deleteOneImage(index);
    // 调整contentOffset
    this.props.refitContentOffset();
  };
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    flexWrap: "wrap"
  },
  contentStyle: {
    width: width / 2.0 - 30.0,
    height: width / 2.0 - 30.0,
    marginTop: 20,
    marginLeft: 20,
    borderRadius: 4
  },
  imageStyle: {
    width: "100%",
    height: "100%",
    borderRadius: 4
  },
  buttonStyle: {
    backgroundColor: "red",
    borderRadius: 16,
    height: 32,
    width: 32,
    left: width / 2.0 - 30.0 - 32.0 + 10.0,
    bottom: width / 2.0 - 30.0 + 10.0
  },
  test: {}
});
